<template>
  <div id="app">
    <!-- <toast ref="toast"/> -->
    <div class="animation" v-show="isAnimation">
      <img :style="{opacity:opacity}" :src="bg" alt="">
    </div>
    <keep-alive exclude="Good,Uindex,PrivateChat,Comment,Collections,Msg"><router-view @hide="hide" @show="show" @updateUser="updateuser" @register='initUser'/></keep-alive>
    <main-tab-bar v-show="isShow" />
  </div>
</template>

<script>
import Toast from './components/Toast/Toast.vue';
import MainTabBar from "./views/MainTabBar.vue";
// const ws = new WebSocket("ws://192.168.43.48:4000");
// const ws = new WebSocket("ws://49.234.36.18:4000");
const ws = new WebSocket("ws://127.0.0.1:4000");
export default {
  components: { MainTabBar,Toast},
  name: "App",
  data(){
    return {
      isShow:true,
      bg:'http://localhost:3000/images/App/1.gif',
      isAnimation:true,
      opacity: 1
    }
  },
  computed:{
    _id() {//用户自己id
      return (this.$store.getters.user&&this.$store.getters.user._id) ||
      (localStorage.getItem('userInfo') &&JSON.parse(localStorage.getItem('userInfo'))._id) ||'';
    },
  },
  created() {
    this.changeImg()
    this.initUser();
    this.getAllusers();
    this.initShopCart();
    this.changeOpacity()
    console.log();  
  },
  mounted() {
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
    this.$bus.$on('private',data=>{
      this.handleWsSend(data)
      console.log('监听到发出私聊信息',data)
    });
    this.$bus.$on('public',data=>{
      this.handleWsSend(data)
      console.log('监听到群聊',data)
    })
  },
  methods:{
    //隐藏tab-bar
    hide(){
      this.isShow = false
    },
    //显示tab-bar
    show(){
      this.isShow = true
    },
    //用户更新信息
    updateuser(){
      this.initUser()
    },
    //初始化用户信息
    initUser(){
      console.log(1)
      let Token = localStorage.getItem("token")
      if (Token) {
      this.$axios({
        url: "users",
        method: "get",
        params: {
          token: Token
        }
      }).then(res => {
        console.log(res.data)
        this.$store.dispatch('DelUserInfo')
        this.$store.dispatch('SaveUserInfo',res.data)
        this.$store.dispatch('ChangeStatus')
      });
    } else {
      return this.$router.push('/login')
    }
    },
    handleWsSend(data) {
      ws.send(
        JSON.stringify(data)
      );
    },
    handleWsOpen(e) {
      ws.send(
        JSON.stringify({
          id: this._id,
          msgType: 0, //用户连接时发送id到服务器
        })
      )
      console.log("群聊开启");
    },
    handleWsClose(e) {
      console.log("群聊关闭");
    },
    handleWsError(e) {
      console.log("群聊异常");
    },
    handleWsMessage(e) {
      const msg = JSON.parse(e.data);
      console.log(msg,'新消息')
      if(msg.msgType==1){
        this.$store.dispatch('NewPublicMsg',msg)
        console.log('接收新群聊信息',msg)
      }else{   
        console.log('接收新私聊别人发的' ,msg)        
        this.$store.dispatch('NewPrivateOther',msg)
        this.$bus.$emit('newmsg',msg)
                
      }   
    },
    getAllusers(){//获取所有用户
      this.$axios({
      url:'/chat/allusers'
    }).then(data=>{
      this.Allusers = data.data
      this.$store.dispatch('CreateArr',data.data)
      // console.log(this.Allusers)
    })
    },
    initShopCart(){//同步购物车数据
      let data = JSON.parse(localStorage.getItem('shopCart'))
      if(data){
        this.$store.dispatch('InitShopCart',data)
      }else{
        return
      }
    },
    changeOpacity(){//动图逐渐变淡
      let o = this.opacity
      this.isAnimation = true
      setInterval(()=>{
        o -= 0.1
        if(o<=0){
          this.isAnimation = false
          return
        }
        this.opacity = o
        console.log(o)
      },300)
      console.log(this.opacity)
    },
    changeImg(){//随机打开网页动图
      let num = parseInt(Math.ceil(Math.random()*7))
      this.bg = 'http://localhost:3000/images/App/'+ num+ '.gif'
      console.log(num)
    }
    //lllll
    //12131313
  }
};
</script>
<style>
@import "./assets/css/base.css";
.animation{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.animation img{
  width: 100%;
  height: 100%;
}
</style>



